import { PageContainer } from '@ant-design/pro-layout';
import ProTable, {ActionType} from '@ant-design/pro-table';
import {PlusOutlined} from '@ant-design/icons';
import { Button, Switch, message} from 'antd';
import {useRef, useState} from 'react';
import {getUserLevel, updateUserStatus} from "@/services/ant-design-pro/users";
import DeleteUserLevel from './deleteModal'
import AddGrade from "@/pages/user/UserGrade/AddGrade";

const UserList = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const actionRef = useRef<ActionType>();

  // 弹出模态框
  const alertModel = ()=>{
    setIsModalVisible(true);
  }

  const columns= [
    {
      title: 'ID',
      dataIndex: 'id',
      search:false,
      align:"center"
    },
    {
      title: '等级图标',
      dataIndex: 'icon',
      search:false,
      align:"center"
    },
    {
      title: '等级名称',
      dataIndex: 'name',
      align:"center"
    },
    {
      title: '等级',
      dataIndex: 'grade',
      search:false,
      align:"center"
    },
    {
      title: '享受折扣',
      dataIndex: 'discount',
      initialValue: 'all',
      search:false,
      align:"center"
    },
    {
      title: '状态',
      dataIndex:'is_show',
      ellipsis: true,
      copyable: true,
      align:"center",
      render: (_,record) =>
        <Switch
          checkedChildren="显示"
          unCheckedChildren="隐藏"
          defaultChecked={record.is_show}
          onChange={async (state)=>{
            updateUserStatus(record.id,{
              is_show:state ? 1 : 0,
            }).then(()=>{
              message.success('操作成功！')
              // 刷新表格
              actionRef.current?.reload();
            })
          }}
        />,
      valueEnum: {
        '1': { text: '显示', status: 'Default' },
        '0': { text: '隐藏', status: 'Processing' },
      },
    },
    {
      title: '等级说明',
      dataIndex: 'valid_date',
      align:"center",
      search:false
    },
    {
      title: '操作',
      width: 180,
      key: 'option',
      align:"center",
      valueType: 'option',
      render: (_,record) => {
        const [isShowDelete, setIsShowDelete] = useState(false);
        // 弹出删除模态框
        const deleteLevel = (record) => {
          setIsShowDelete(true)
        }
        return [
          <a key="link">编辑</a>,
          <a key="link1"
             onClick={() => {
               deleteLevel(record)
             }}
          >删除等级
            <DeleteUserLevel
              record={record.id}
              actionRef={actionRef}
              isShowDelete={isShowDelete}
              setIsShowDelete={setIsShowDelete}
            />
          </a>,
        ]

      },
    },
  ];

  return (
    <PageContainer>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={async (params,sort)=>{
          const {data,meta} = await getUserLevel({...params,...sort})
          return {
            data,
            success:true,
            total:meta.pagination.total
          }
        }}
        rowKey="id"
        editable={{
          type: 'multiple',
        }}
        search={{
          collapsed: false,
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary" onClick={alertModel}>
            添加会员等级
          </Button>,
        ]}
      />
      {
        isModalVisible ?
          <AddGrade
            visible={isModalVisible}
            open={()=>{
              setIsModalVisible(false)
            }}
            closed={()=>{
              setIsModalVisible(false)
            }}
          />
          : null
      }

    </PageContainer>
  );
};

export default UserList;

